<template>
  <div class="login">
    用户名：<input type="text" v-model="userInfo.username"><br>
    密码：<input type="text" v-model="userInfo.password"><br>
    <button @click="login">登录</button>
  </div>
</template>

<script lang='ts' setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const userInfo = reactive({
  username: '',
  password: ''
})
const login = () => {
  if(userInfo.password&&userInfo.password){
    router.push('/home')
    return localStorage.setItem('token','1')
  }
 alert('请输入用户名或密码')
}
</script>

<style scoped>
.login {
  background-color: red;
  width: 400px;
  height: 400px;
  color: white;
  font-size: 20px;
}
</style> 